<template>
  <div>
    <div style="display: flex;">
      <MkPanel title="检索" style="width: 290px;">
        <template #header>
          <div class="title">
            <div>检索</div>
            <MkButtonQuery @click="doSearch" :loading="loading"></MkButtonQuery>
          </div>
        </template>
        <MkForm :model='searchParam' ref='formMingXiRef' :col="1" labelPosition="top">
          <el-form-item label="血液品种">
            <el-checkbox-group v-model="searchParam.listXueYePinZhong" @change="doSearch">
              <el-checkbox v-for="item in xueYePinZhongList" :key="item.id" :value="item.id"
                :label="item.mingCheng"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="ABO血型">
            <el-checkbox-group @change="doSearch" v-model="searchParam.listABO">
              <el-checkbox v-for="item in getEnumItemsByType(enumType.ABOKuCun)" :key="item.code" :value="item.code"
                :label="item.code"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="RhD血型">
            <el-checkbox-group @change="doSearch" v-model="searchParam.listRhD">
              <el-checkbox v-for="item in getEnumItemsByType(enumType.RhDKuCun)" :key="item.code" :value="item.code"
                :label="item.code"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="库存状态">
            <el-checkbox-group @change="doSearch" v-model="searchParam.listKuCunZhuangTai">
              <el-checkbox v-for="item in getEnumItemsByType('KuCunZhuangTai')" :key="item.code" :value="item.code"
                :label="item.code"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="所属院区">
            <el-checkbox-group @change="doSearch" v-model="searchParam.listYuanQuId">
              <el-checkbox v-for="item in yuanQuList" :key="item.id" :value="item.id" :label="item.name"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <MkInput label="献血码" isEdit v-model.trim="searchParam.xianXueMa" @keyup-enter="doSearch" />
          <MkInputNumber label="容量" isEdit v-model.trim="searchParam.rongLiang" @keyup-enter="doSearch" />
          <el-form-item label="失效区间">
            <MkDateTime v-model="searchParam.shiXiaoStartTime" style="margin-bottom: 5px;" />
            <MkDateTime v-model="searchParam.shiXiaoEndTime" />
          </el-form-item>
          <el-form-item label="入库区间">
            <MkDateTime v-model="searchParam.ruKuStartTime" style="margin-bottom: 5px;" />
            <MkDateTime v-model="searchParam.ruKuEndTime" />
          </el-form-item>
        </MkForm>
      </MkPanel>
      <div style="overflow:hidden;">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane lazy label="血液库存" name="血液库存" style="overflow:hidden;">
            <MkTable :data="tableData" @row-dblclick="showEdit">
              <MkColumnIndex />
              <MkColumnXueYe />
              <MkColumn prop="kuCunZhuangTai" label="库存状态" :col="0.6" />
              <MkColumnBasEntity prop="yuanQuId" label="所属院区" entity="SysOrg" />
              <MkColumnBasEntity prop="laiYuanId" label="血液来源" entity="BasXueYeLaiYuan" />
              <MkColumn prop="ziBianHao" label="自编号" :col="0.7" />
              <MkColumnDate prop="caiXueShiJian" label="采血时间" />
              <MkColumnDate prop="createTime" label="入库时间" />
            </MkTable>
            <MkPagination v-model:page="searchParam.page" v-model:pageSize="searchParam.pageSize" :total="total"
              @query="doSearch" />
          </el-tab-pane>
          <el-tab-pane lazy label="血袋闭环" name="血袋闭环">
            <edit :xueYe="xueYe"></edit>
          </el-tab-pane>
          <!-- el-tab-pane lazy label="库存汇总" name="库存汇总">
            <InvKuCunHuiZong :bloodList="showList" />
          </el-tab-pane -->
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup name="invKuCun">
/* 库存查询
打开界面自动显示库存汇总页签
查询后自动定位到库存明细页签
*/
import { InvKuCunApi, InvKuCunOutput, InvKuCunPageInput } from '/@/api/inv/InvKuCun';
import { xueYePinZhongList, getEnumItemsByType, loginInfo, yuanQuList } from '/@/stores/baseInfo';
import { usePageQuery } from '/@/hooks/usePageQuery';
import { enumType } from '/@/const';
import edit from './edit.vue';
import InvKuCunHuiZong from './invKuCunHuiZong.vue';

const { searchParam, total, tableData, loading, search } = usePageQuery<InvKuCunOutput, InvKuCunPageInput>(InvKuCunApi.page)
searchParam.listKuCunZhuangTai = ["在库"]

const activeName = ref('血液库存')
const xueYe = ref()

onMounted(() => {
  if (loginInfo.value.yuanQuId > 0) {
    searchParam.listYuanQuId = [loginInfo.value.yuanQuId]
  }
})

// 查询前处理
const doSearch = () => {
  search();
  activeName.value = '血液库存'
}

const showEdit = (row) => {
  xueYe.value = row;
  activeName.value = '血袋闭环'
}

</script>

<style lang='scss' scoped>
.title {
  font-size: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
  color: #0F59A4;
  font-size: medium;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
  color: #00000080;
}
</style>